<template>
    <div class="userInfo">
        <!-- 导航栏 -->
        <div class="banner">
            <div class="container">
                <div class="left_content"></div>
                <div class="middle_content">
                    <ul>
                        <router-link tag="li" to="/secondHand">二手房</router-link >
                        <router-link tag="li" to="/AnewHouse">新房</router-link >
                        <router-link tag="li" to="/rental">租房</router-link >
                        <router-link tag="li" to="/Office">写字楼</router-link >
                        <router-link tag="li" to="/village">小区</router-link>
                        <li>问答</li>
                        <li>工具</li>
                        <router-link tag="li" to="/release">发布房源</router-link>
                    </ul>
                </div>
                <div class="right-content">
                    <span>{{userInfo}}</span>
                    <span @click="quit">退出</span>
                </div>
            </div>
        </div>
        <div class="user-main">
            <div class="main-left">
                <div class="name"></div>
                <div class="username">欢迎你，{{userInfo}}</div>
                <ul>
                    <li :class="{'con':i == 0}" @click="i = 0">关注的房源</li>
                    <li :class="{'con':i == 1}" @click="i = 1">加入对比的房屋</li>
                    <li :class="{'con':i == 2}" @click="i = 2">我的经纪人</li>
                    <li :class="{'con':i == 3}" @click="i = 3">看房记录</li>
                    <li :class="{'con':i == 4}" @click="i = 4">我的搜索</li>
                    <li :class="{'con':i == 5}" @click="i = 5">我的问答</li>
                    <li :class="{'con':i == 6}" @click="i = 6">房源发布</li>
                </ul>
            </div>
            <div class="main-right">
                <!-- 房源 -->
                <div class="fangyuan" v-show="i == 0">
                    <div class="title">共<span>{{secondFan.length}}</span>套 关注房源</div>
                    <!-- 选项卡 -->
                    <div class="tab">
                        <span class="hover">二手房</span>
                        <span>新房</span>
                        <span>租房</span>
                    </div>
                    <!-- 没有关注房源的 -->
                    <div class="initial"  v-show="fanList.length == 0">
                        <div class="initial-logo"></div>
                        <p>还没有任何关注的房源喔</p>
                    </div>
                    <ul class="secondeFan">
                        <li v-for="item in secondFan" :key="item.id">
                            <div class="list">
                                <!-- 左边 -->
                                <div class="pic-panel">
                                    <img :src="item.image" alt="">
                                </div>
                                <!-- 右边 -->
                                <div class="info-panel">
                                    <h2>{{item.title}}</h2>
                                    <div class="col-1">
                                        <div class="where">
                                            <span>{{item.address}}&nbsp;&nbsp;</span>
                                            <span class="zone">{{item.houseapartment}}{{item.houseapartmentS}}</span>
                                            <span class="meters">{{item.square}}平米</span>
                                            <span>{{item.orientation}}</span>
                                        </div>
                                        <div class="other">
                                            <div class="con">
                                                <span>二手房</span>
                                                <span>/</span>
                                                <span>{{item.floor}}({{item.floorA}})</span>
                                                <span>/</span>
                                                <span>{{item.buildingFinishYear}}{{item.style}}</span>
                                            </div>
                                        </div>
                                        <div class="chanquan">
                                            <div class="view-label">
                                                <span>近地铁</span>
                                                <span>VR看装修</span>
                                                <span>房本满五年</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="price"><span class="num">{{item.price}}</span>万</div>
                                        <div class="price-pre">{{item.unitPrice}} 元/m²</div>
                                    </div>
                                </div>
                            </div>
                            <div class="fan" @click="fanFun(item.id)">
                                <span>取消关注</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 小区 -->
                <div class="xiaoqu" v-show="i == 1">
                    <div class="title">共<span>0</span>个 对比的房屋</div>
                    <!-- 选项卡 -->
                    <div class="tab">
                        <span class="hover">全部</span>
                        <span>在售</span>
                        <span>已成交</span>
                    </div>
                    <!-- 没有关注房源的 -->
                    <div class="initial"  v-show="secondCom.length == 0">
                        <div class="initial-logo"></div>
                        <p>还没有任何加入对比的房屋喔</p>
                    </div>
                    <ul class="secondeFan">
                        <li v-for="item in secondCom" :key="item.id">
                            <div class="list">
                                <!-- 左边 -->
                                <div class="pic-panel">
                                    <img :src="item.image" alt="">
                                </div>
                                <!-- 右边 -->
                                <div class="info-panel">
                                    <h2 class="h2">{{item.title}}</h2>
                                    <div class="col-1">
                                        <div class="where">
                                            <span>{{item.address}}&nbsp;&nbsp;</span>
                                            <span class="zone">{{item.houseapartment}}{{item.houseapartmentS}}</span>
                                            <span class="meters">{{item.square}}平米</span>
                                            <span>{{item.orientation}}</span>
                                        </div>
                                        <div class="other">
                                            <div class="con">
                                                <span>二手房</span>
                                                <span>/</span>
                                                <span>{{item.floor}}({{item.floorA}})</span>
                                                <span>/</span>
                                                <span>{{item.buildingFinishYear}}{{item.style}}</span>
                                            </div>
                                        </div>
                                        <div class="chanquan">
                                            <div class="view-label">
                                                <span>近地铁</span>
                                                <span>VR看装修</span>
                                                <span>房本满五年</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="price"><span class="num">{{item.price}}</span>万</div>
                                        <div class="price-pre">{{item.unitPrice}} 元/m²</div>
                                    </div>
                                </div>
                            </div>
                            <div class="fan" @click="comFun(item.id)">
                                <span>取消对比</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 经纪人 -->
                <div class="agent" v-show="i == 2">
                    <div class="initial">
                        <div class="initial-logo"></div>
                        <p>还没有任何服务信息</p>
                    </div>
                </div>
                <!-- 看房记录 -->
                <div class="record" v-show="i == 3">
                    <div class="record_num">
                        <p>共 <span>0</span>套带看记录</p>
                    </div>
                </div>
                <!-- 搜索 -->
                <div class="search" v-show="i == 4">
                    <div class="title">共<span>0</span>个 已保存搜索</div>
                    <div class="initial">
                        <div class="initial-logo"></div>
                        <p>还没有任何保存的搜索喔</p>
                    </div>
                </div>
                <!-- 问答 -->
                <div class="qamy" v-show="i == 5">
                    <div class="title">我的问答</div>
                    <!-- 选项卡 -->
                    <div class="tab">
                        <span class="hover">我的提问</span>
                        <span>我的关注</span>
                        <span>我的回复</span>
                        <span>我收到的</span>
                    </div>
                    <!-- 没有问答的 -->
                    <div class="initial">
                        <div class="initial-logo"></div>
                        <p>哇喔~你还没有任何信息喔</p>
                    </div>
                </div>
                <!-- 发布房源 -->
                <div class="release" v-show="i == 6">
                    <div class="title">共<span>{{releaseList.length}}</span>个 发布的房源</div>
                    <!-- 没有问答的 -->
                    <div class="initial" v-show="releaseList.length == 0">
                        <div class="initial-logo"></div>
                        <p>还没有任何房源喔</p>
                    </div>
                    <ul class="releaselist">
                        <li v-for="(item,index) in releaseList" :key="index">
                            <h4>{{index}}</h4>
                            <p>{{item.city}}{{item.name}}{{item.address}}</p>
                            <div class="icon">
                                <span>正在审核</span>
                                <span @click="sub(index)">删除</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getSecondHand } from "../api/secondHand.js"
    export default {
        name:"userInfoView",
        data() {
            return {
                userInfo:"",  //用户名
                i:0,  //下标
                fanList:[],  //本地存储关注数组
                companList:[],  //本地存储加入对比数组
                secondHandList:[],  //二手房数组
                secondFan:[],  //关注二手房数组
                secondCom:[],  //加入对比的二手房数组
                releaseList:[] //房源发布数组
            }
        },
        methods:{
            // 退出
            quit(){
                window.localStorage.removeItem("token");
                this.$router.push("/Home");
            },
            // 关注按钮
            fanFun(id){
                // 删除对应的关注数据
                let index = this.secondFan.findIndex(item => item.id == id);
                console.log(index);
                this.secondFan.splice(index,1);

                // 删除本地存储里面的关注数组
                let k = this.fanList.findIndex(item => item == id);
                this.fanList.splice(k,1);

                window.localStorage.setItem("fanList",JSON.stringify(this.fanList));

            },
            comFun(id){

                // 删除对应的加入数据
                let index = this.secondCom.findIndex(item => item.id == id);
                console.log(index);
                this.secondCom.splice(index,1);

                // 删除本地存储里面的加入数组
                let k = this.companList.findIndex(item => item == id);
                this.companList.splice(k,1);

                window.localStorage.setItem("companList",JSON.stringify(this.companList));
            },
            // 调用json 数据方法
            getSecondHandFun(){
                getSecondHand().then(data => {
                    console.log(data);
                    this.secondHandList = data;  //二手房数组

                    // 判断关注数组
                    if(window.localStorage.getItem("fanList")){
                        this.fanList = JSON.parse(window.localStorage.getItem("fanList"));
                        // console.log(this.fanList);


                        for(let i = 0 ; i < this.fanList.length;i++){
                            let index = this.secondHandList.findIndex(item => item.id == this.fanList[i]);
                            if( index != -1){
                                // 添加数据到关注二手房数组
                                this.secondFan.push(this.secondHandList[index]);
                                console.log(this.secondFan,'官族');
                            }
                        }
                    }

                    // 判断加入对比的房屋 数组
                    if(window.localStorage.getItem("companList")){
                        this.companList = JSON.parse(window.localStorage.getItem("companList"));

                        for(let i = 0; i< this.companList.length;i++){
                            let index = this.secondHandList.findIndex(item => item.id == this.companList[i]);
                            if(index != -1){
                                // 添加数组到加入对比的房屋
                                this.secondCom.push(this.secondHandList[index]);
                                console.log(this.secondCom,"加入");
                            }
                        }
                    }


                })
            },
            // 删除发布房源
            sub(index){
                this.releaseList.splice(index,1);
                window.localStorage.setItem("releaseList",JSON.stringify(this.releaseList))
            }
        },
        created(){
             // 判断是否有token值
            if(window.localStorage.getItem("token")){
              let phone = window.localStorage.getItem("token");
              this.userInfo = phone.substring(0,3) + "***" + phone.substring(phone.length -3);
            }
            // 初始化发布房源数组
            if(window.localStorage.getItem("releaseList")){
                this.releaseList = JSON.parse(window.localStorage.getItem("releaseList"))
            }
            // 调用json数据方法
            this.getSecondHandFun();
        }
    }
</script>

<style lang="scss" scoped>
.userInfo{
    // 导航栏
    .banner{
        height: 55px;
        width: 100%;
        background: #39ac6a;
        .container{
            display: flex;
            align-items: center;
            height: 55px;
            justify-content: space-between;
            width: 1000px;
            .left_content{
                width: 100px;
                height: 36px;
                // background: url(https://s1.ljcdn.com/feroot/pc/asset/img/new-version/logo.png?t=2017052520523424)no-repeat;
                background: url("../assets/image/首页.png") no-repeat center center;
                background-size: 90% 90%;
            }
            .middle_content{
                margin-left: 20px;
                flex: 1;
                ul{
                    height: 55px;
                    display: flex;
                    align-items: center;

                    li{
                        color: #fff;
                        padding: 0 10px;
                        font-size: 16px;
                        cursor: pointer;
                    }
                }
            }
            .right-content{
                display: flex;
                height: 55px;
                align-items: center;
                span{
                    font-size: 14px;
                    color: #fff;
                    max-width: 45px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-left: 8px;
                    cursor: pointer;
                }
            }
        }
    }
    // 主要内容
    .user-main{
        margin: 0 auto;
        width: 1000px;
        padding: 30px 0;
        display: flex;
        justify-content: space-between;

        .main-left{
            width: 150px;
            border: 1px solid #e6e5e5;
            padding: 35px 0 9px;
            background: #fff;
            box-shadow: 0 1px 2px rgb(0 0  0 / 15%);

            .name{
                width:80px;
                height: 80px;
                background: url(https://s1.ljcdn.com/feroot/pc/asset/img/user/sprite_user.png)no-repeat -161px 0;
                margin: 0 auto;
            }

            .username{
                font-size: 14px;
                color: #333;
                text-align: center;
                padding: 15px 0;
                width: 100%;
            }
            ul{
                width: 100%;

                li{
                    width: 150px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    color: #555;
                    font-size: 14px;
                    cursor: pointer;

                    &:hover{
                        text-decoration: underline;
                    }

                    &.con{
                        color: #fff;
                        background: #4fac6a;
                    }
                }
            }
        }
        .main-right{
            box-shadow: 0 1px 2px rgb(0 0 0 /15%);
            // padding: 35px;
            background: #fff;
            border: 1px solid #e6e5e5;
            width: 825px;

            .fangyuan,.xiaoqu,.search,.qamy,.release{
                margin: 35px;
                width: 755px;
                .title{
                    font-size: 22px;
                    font-weight: bold;
                    color: #333;
                    
                    span{
                        color: #E4393C;
                        margin: 0 10px;
                    }
                }
                .tab{
                    margin-top: 20px;
                    background: #f5f5f5;
                    height: 38px;
                    line-height: 38px;
                    border-bottom: 1px solid #e6e5e5;
                    overflow: hidden;
                    display: flex;

                    span{
                        padding: 0 25px;
                        font-size: 14px;
                        color: #888;
                        cursor: pointer;
                        height: 38px;
                        line-height: 38px;

                        &.hover{
                            background: #e6e6e6;
                            color: #333;
                            cursor: default;
                            height: 38px;
                        }
                    }
                }
                .initial{
                    margin: 85px auto;
                    .initial-logo{
                        width: 62px;
                        height: 63px;
                        margin: 0 auto;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/img/user/sprite_user.png)no-repeat -48px 0;
                    }
                    p{
                        text-align: center;
                        width: 100%;
                        font-size: 14px;
                        margin-top: 20px;
                        color: #888;
                    }
                }
                .secondeFan{
                    width: 100%;
                    box-sizing: border-box;
                    li{
                        border-bottom: 1px dashed #e9e9e9;
                        height: 170px;
                        position: relative;
                        padding-top: 30px;
                        .list{
                            margin-top: 20px;
                            // overflow: hidden;
                            position: relative;
                            display: flex;
                            justify-content: space-between;

                            .pic-panel{
                                width: 175px;

                                img{
                                    width: 173px;
                                    height: 130px;
                                }
                            }
                            .info-panel{
                                color: #565a5c;
                                padding-left: 18px;
                                font-size: 0;
                                width: 555px;
                                position: relative;
                                height: 130px;

                                h2{
                                    font-size: 19px;
                                    white-space: nowrap;
                                    width: 100%;
                                    height: 32px;
                                    line-height: 20px;
                                    vertical-align: middle;
                                    color: #009de8;
                                    font-weight: 700;
                                    cursor: pointer;
                                    // padding-bottom: 12px;

                                    &.h2{
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        width: 400px;
                                    }
                                }
                                .col-1{

                                    .where{
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        color: #555;
                                        height: 18px;
                                        line-height: 18px;
                                        margin-top: 7px;

                                        span{
                                            color: #333;
                                            font-size: 14px;
                                            display: inline-block;
                                            margin-right: 14px;

                                            &.zone{
                                                border-right: 1px solid #ddd;
                                                padding-right: 10px;
                                            }
                                            &.meters{
                                                border-right: 1px solid #ddd;
                                                width: 73px;
                                            }
                                        }
                                    }

                                    .other{
                                        height: 31px;
                                        line-height: 31px;
                                        color: #888;
                                        margin-top: 6px;

                                        .con{
                                            width: 410px;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            font-size: 14px;
                                            color: #888;
                                            span{
                                                color: #bbb;
                                                margin:0 8px;

                                                &:first-child{
                                                    color: #888;
                                                    margin-left: 0;
                                                }
                                            }
                                        }
                                    }
                                    .chanquan{
                                        font-size: 12px;
                                        margin-top: 10px;
                                        width: 555px;
                                        position: relative;

                                        .view-label{
                                            display: flex;
                                            span{
                                                display:inline-block;
                                                height: 23px;
                                                text-align: center;
                                                border: 1px solid #82a1bb;
                                                padding: 0 5px;
                                                margin-left: 5px;
                                                line-height: 23px;
                                                
                                                &:first-child{
                                                    margin-left: 0;
                                                }
                                            }
                                        }
                                    }
                                }

                                .col-3{
                                    width: auto;
                                    text-align: right;
                                    position: absolute;
                                    top: 24px;
                                    right: 10px;

                                    .price{
                                        color: #E4393C;
                                        margin-top: 6px;
                                        width: 100%;
                                        position: relative;
                                        font-size: 16px;

                                        .num{
                                            font-size: 30px;
                                            font-weight: 700;
                                            margin-right: 3px;
                                            font-family: tahoma;
                                        }
                                    }
                                    .price-pre{
                                        font-size: 12px;
                                        color: #999;
                                        font-family: Arial;
                                        margin-top: 5px;
                                        line-height: 16px;
                                    }
                                }
                            }
                        }
                        .fan{
                            position: absolute;
                            top: 0;
                            right: 0;
                            width: 85px;
                            height: 33px;
                            text-align: center;
                            line-height: 33px;
                            color: #fff;
                            background: #555;
                            display: none;
                            font-size: 14px;
                            cursor: pointer;
                        }

                        &:hover>.fan{
                            display: block;
                        }
                    }
                }
                .releaselist{
                    width: 100%;
                    box-sizing: border-box;
                    
                    li{
                        display: flex;
                        border-bottom: 1px dashed #e9e9e9;
                        position: relative;
                        padding:30px 0 15px 0;
                        // justify-content: space-between;
                        align-items: center;
                        cursor: pointer;
                        h4{
                            font-size: 16px;
                            font-weight: 700;
                        }
                        p{
                            font-size: 16px;
                            width: 150px;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            text-align: left;
                            padding-left: 15px;
                        }
                        .icon{
                            display: flex;
                            span{
                                display: inline-block;
                                height: 23px;
                                text-align: center;
                                border: 1px solid #82a1bb;
                                padding: 0 5px;
                                margin-left: 10px;
                                line-height: 23px;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
            .agent{
                width: 755px;
                margin: 35px 0;
                .initial{
                    margin: 85px 0;

                    .initial-logo{
                        width: 62px;
                        height: 63px;
                        margin: 0 auto;
                        background: url(https://s1.ljcdn.com/feroot/pc/asset/img/user/sprite_user.png)no-repeat -48px 0;
                    }
                    p{
                        text-align: center;
                        width: 100%;
                        font-size: 14px;
                        margin-top: 20px;
                        color: #888;
                    }
                }
            }

            .record{
                width: 755px;
                margin: 35px;
                
                .record_num{
                    background: #fffcf6;
                    border: 1px solid #e6d5b2;
                    width: 100%;
                    margin-bottom: 22px;
                    height: 38px;
                    display: flex;
                    align-items: center;
                    padding-left: 15px;
                    p{
                        font-size: 14px;
                        color: #333;

                        span{
                            color: red;
                            padding: 0 3px;
                        }
                    }
                }
            }
            
        }
    }
}
</style>